<style include="cr-shared-style scanning-shared scanning-fonts">
  #appTitle {
    color: var(--scanning-app-title-text-color);
    font-family: var(--scanning-app-title-font-family);
    font-size: var(--scanning-app-title-font-size);
    font-weight: var(--scanning-medium-font-weight);
    line-height: var(--scanning-app-title-line-height);
    margin-bottom: 16px;
    margin-inline-end: 0;
    margin-inline-start: 32px;
    margin-top: 0;
  }

  #moreSettingsButton {
    --ink-color: var(--menu-text-color);
    --paper-ripple-opacity: 0;
    align-items: center;
    background: none;
    border: none;
    border-radius: initial;
    color: var(--scanning-more-settings-text-color);
    display: flex;
    font-family: var(--scanning-more-settings-font-family);
    font-size: var(--scanning-more-settings-font-size);
    font-weight: var(--scanning-regular-font-weight);
    height: unset;
    line-height: var(--scanning-more-settings-line-height);
    margin-bottom: 8px;
    margin-inline-end: 40px;
    margin-inline-start: 32px;
    margin-top: 0;
    padding-inline: 0;
    text-transform: none;
    width: 280px;
  }

  #moreSettingsButton:active {
    box-shadow: none;
  }

  #moreSettingsButton:focus {
    outline: none;
  }

  #moreSettingsButton > iron-icon {
    height: 20px;
    width: 20px;
  }

  #moreSettingsButton > span {
    flex: 1;
  }

  #more-settings-line-separator {
    border-bottom: var(--cr-separator-line);
    margin-bottom: 8px;
    margin-inline-end: 40px;
    margin-inline-start: 32px;
    margin-top: 8px;
    width: 280px;
  }

  #scanningContainer {
    box-sizing: border-box;
    display: block;
    margin: 0 auto;
    position: relative;
    width: var(--container-width);
  }

  #leftPanel {
    margin-inline-end: var(--left-panel-margin-inline-end);
    margin-inline-start: var(--left-panel-margin-inline-start);
    width: var(--left-panel-width);
  }

  #panelContainer {
    display: flex;
    height: calc(100vh - var(--panel-container-margin-top));
    margin-top: var(--panel-container-margin-top);
  }

  #rightPanel {
    display: flex;
    flex-direction: column;
    margin-inline-end: var(--right-panel-margin-inline-end);
    margin-inline-start: var(--right-panel-margin-inline-start);
    padding-inline-end: var(--right-panel-padding-inline-end);
    padding-inline-start: var(--right-panel-padding-inline-start);
    width: 352px;
  }

  /* Align with Print Preview and use lighter box-shadows compared to the
   * default styling. */
  #cr-container-shadow-top,
  #cr-container-shadow-bottom {
    box-shadow: inset 0 5px 3px -3px rgba(0, 0, 0, .2);
    margin-inline-end: 40px;
    margin-inline-start: 32px;
  }

  #settingsSection {
    display: flex;
    flex: 1;
    flex-direction: column;
    min-height: 0;
  }

  #container {
    overflow: overlay;
  }

  .scan-button-container {
    display: flex;
    justify-content: flex-end;
    margin-bottom: 32px;
    margin-inline-end: 40px;
    margin-inline-start: 32px;
    margin-top: 32px;
    width: 280px;
  }

  #toast {
    --cr-toast-background: var(--cros-toast-background-color);
    --cr-toast-text-color: var(--cros-toast-text-color);
    bottom: 0;
    left: 0;
  }

  #toastDiv {
    align-items: center;
    display: flex;
    min-width: 280px;
  }

  #toastInfoIcon {
    fill: var(--cros-toast-icon-color-error);
    margin-inline-end: 10px;
    margin-inline-start: -8px;
  }

  #toastText {
    color: var(--cros-toast-text-color);
  }

  #getHelpDiv {
    flex: 1;
    margin-inline-start: 10px;
    text-align: right;
  }

  #getHelpLink {
    color: var(--cros-link-color);
    text-decoration: none;
  }

  #dialogInfoIcon {
    display: block;
    fill: var(--cros-icon-color-alert);
    margin-bottom: 14px;
  }

  #scanFailedDialog [slot=body] {
    color: var(--cros-text-color-secondary);
  }

  #scanFailedDialog [slot=title] {
    color: var(--cros-text-color-primary);
  }

  cr-dialog#scanFailedDialog::part(dialog) {
    background-color: var(--cros-bg-color-elevation-3);
  }
</style>
<div id="scanningContainer">
  <loading-page hidden="[[scannersLoaded_]]" app-state="[[appState_]]"
      on-retry-click="onRetryClick_" on-learn-more-click="onLearnMoreClick_">
  </loading-page>
  <div id="panelContainer" hidden="[[!scannersLoaded_]]">
    <div id="leftPanel">
      <scan-preview id="scanPreview" app-state="[[appState_]]"
          object-urls="[[objectUrls_]]" page-number="[[pageNumber_]]"
          progress-percent="[[progressPercent_]]"
          is-multi-page-scan="[[isMultiPageScan_]]"
          on-remove-page="onRemovePage_"
          on-rescan-page="onRescanPage_"></scan-preview>
    </div>
    <div id="rightPanel">
      <h1 id="appTitle">[[i18n('appTitle')]]</h1>
      <div id="settingsSection" hidden="[[!showScanSettings_]]">
        <div id="container" show-bottom-shadow>
          <scanner-select id="scannerSelect" scanners="[[scanners_]]"
              disabled="[[settingsDisabled_]]"
              selected-scanner-id="{{selectedScannerId}}"
              last-used-scanner-id="[[lastUsedScannerId_]]"
              scanner-info-map="[[scannerInfoMap_]]"></scanner-select>
          <source-select id="sourceSelect" options="[[capabilities_.sources]]"
              disabled="[[settingsDisabled_]]"
              selected-option="{{selectedSource}}"></source-select>
          <scan-to-select id="scanToSelect"
              disabled="[[settingsDisabled_]]"
              selected-file-path="{{selectedFilePath}}"
              selected-folder="{{selectedFolder}}">
          </scan-to-select>
          <file-type-select id="fileTypeSelect"
              disabled="[[settingsDisabled_]]"
              selected-file-type="{{selectedFileType}}"></file-type-select>
          <multi-page-checkbox id="multiPageCheckbox"
              hidden="[[!showMultiPageCheckbox_]]"
              multi-page-scan-checked="{{multiPageScanChecked}}"
              disabled="[[settingsDisabled_]]">
          </multi-page-checkbox>
          <div id="more-settings-line-separator"></div>
          <cr-button id="moreSettingsButton" on-click="toggleClicked_"
              aria-expanded="[[opened_]]">
            <span>[[i18n('moreSettings')]]</span>
            <iron-icon icon="[[arrowIconDirection_]]"></iron-icon>
          </cr-button>
          <iron-collapse id="collapse" opened="{{opened_}}">
            <color-mode-select id="colorModeSelect"
                options="[[selectedSourceColorModes_]]"
                disabled="[[settingsDisabled_]]"
                selected-option="{{selectedColorMode}}">
            </color-mode-select>
            <page-size-select id="pageSizeSelect"
                options="[[selectedSourcePageSizes_]]"
                disabled="[[settingsDisabled_]]"
                selected-option="{{selectedPageSize}}">
            </page-size-select>
            <resolution-select id="resolutionSelect"
                options="[[selectedSourceResolutions_]]"
                disabled="[[settingsDisabled_]]"
                selected-option="{{selectedResolution}}">
            </resolution-select>
          </iron-collapse>
        </div>
        <div class="scan-button-container">
          <cr-button id="scanButton" class="action-button" on-click="onScanClick_"
              disabled$="[[settingsDisabled_]]"
              hidden$="[[showCancelButton_]]">
            [[scanButtonText_]]
          </cr-button>
          <cr-button id="cancelButton" on-click="onCancelClick_"
              hidden$="[[!showCancelButton_]]"
              disabled$="[[cancelButtonDisabled_]]">
            [[i18n('cancelButtonText')]]
          </cr-button>
        </div>
      </div>
      <template is="dom-if" if="[[showDoneSection_]]">
        <scan-done-section num-files-saved="[[getNumFilesSaved_(pageNumber_)]]"
            on-done-click="onDoneClick_" on-file-not-found="onFileNotFound_"
            scanned-file-paths="[[scannedFilePaths_]]"
            selected-folder="[[selectedFolder]]"
            selected-file-type="[[selectedFileType]]">
        </scan-done-section>
      </template>
      <template is="dom-if" if="[[showMultiPageScan_]]">
        <multi-page-scan page-number="[[pageNumber_]]" app-state="[[appState_]]"
            on-scan-next-page="onScanNextPage_"
            on-complete-multi-page-scan="onCompleteMultiPageScan_"
            on-cancel-click="onCancelClick_">
        </multi-page-scan>
      </template>
    </div>
  </div>
  <cr-toast id="toast" duration="5000">
    <div id="toastDiv">
      <iron-icon id="toastInfoIcon" icon="cr:info-outline"
          hidden="[[!showToastInfoIcon_]]"></iron-icon>
      <span id="toastText">[[i18n(toastMessageKey_)]]</span>
      <div id="getHelpDiv">
        <a id="getHelpLink" target="_blank"
            href="http://support.google.com/chromebook?p=chrome_scanning"
            hidden="[[!showToastHelpLink_]]">
          [[i18n('getHelpLinkText')]]</a>
      </div>
    </div>
  </cr-toast>
  <cr-dialog id="scanFailedDialog" on-cancel="onScanFailedDialogOkClick_">
    <div slot="title">
      <iron-icon id="dialogInfoIcon" icon="cr:info-outline" aria-hidden="true">
      </iron-icon>
      [[i18n('scanFailedDialogTitleText')]]
    </div>
    <div id="scanFailedDialogText" slot="body">
      [[i18n(scanFailedDialogTextKey_)]]
    </div>
    <div slot="button-container">
      <cr-button class="cancel-button"
          on-click="onScanFailedDialogGetHelpClick_">
        [[i18n('getHelpLinkText')]]
      </cr-button>
      <cr-button id="okButton" class="action-button"
          on-click="onScanFailedDialogOkClick_">
        [[i18n('okButtonLabel')]]
      </cr-button>
    </div>
  </cr-dialog>
</div>
